<template>
  <div class="user">
    <button @click="postData">查询</button>
    <button @click="getData">pop</button>
    <ul>
      <li :key="item.id" v-for="item in items">{{item.username}}---{{item.age}}----{{item.sex}}</li>
    </ul>
  </div>
</template>

<script>
// 一个tab是2个空格
// console.log('123456')
import store from '../localStorage'
export default {
  name: 'user',
  data () {
    return {
      items: store.fetch()
    }
  },
  methods: {
    postData () {
      console.log('init......')
      var newItems = this.items
      this.$http.get('/api/user/getAll').then(function (resp) {
        resp.data.forEach((item, index, arr) => {
          console.log(item)
          newItems.push({
            id: item.id,
            username: item.username,
            age: item.age,
            sex: item.sex
          })
        })
        console.log(newItems)
      })
      console.log('--------------------------')
      console.log(newItems)
    },
    getData () {
      this.items.pop()
    }
  },
  watch: {
    items: {
      handler: function (items) {
        store.save(items)
      },
      deep: true
    }
  }
}
</script>

<style>

</style>
